<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件传值</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 父组件通过属性向子组件传值 -->
		<count :index="2" @inc="incIncrease"></count>
		<count :index="3" @inc="incIncrease"></count>
		<div>{{total}}</div>
	</div>
	<script type="text/javascript">
		var counter = {
			props: ['index'],// 接收父组件的属性
			// 子组件向父组件传值通过副本
			data: function() {
				return {
					number:this.index
				}
			},
			template: '<div @click="addOne">{{number}}</div>',
			methods: {
				addOne: function() {
					this.number ++
					// 单击子组件向父组件传值，通过事件
					this.$emit('inc', 1);
				}
			}
		}

		// 父组件是根的实例
		var vm = new Vue({
			el: '#app',
			data: {
				total: 5
			},
			components: {
				count: counter
			},
			methods: {
				incIncrease: function(step) {
					this.total += step
				}
			}
		})
	</script>
</body>
</html>
